<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>支付失败</title>
    <!-- 引入Pacifico手写字体（Google Fonts） -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <!-- 引入图标库（失败图标） -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Pacifico', cursive; /* 统一手写字体 */
        }

        body {
            /* 白金主题背景：米白底色+淡金纹理 */
            background-color: #F9F7F1;
            background-image:
                /* 淡金网点阵：模拟金属光泽 */
                    radial-gradient(rgba(212, 175, 55, 0.05) 1px, transparent 1px),
                    linear-gradient(135deg, #F9F7F1 0%, #F0EEE6 100%);
            background-size: 25px 25px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        /* 背景鎏金光晕：增强白金质感 */
        body::before {
            content: "";
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 650px;
            height: 650px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 0;
            filter: blur(70px);
        }

        /* 支付失败容器：白金质感卡片 */
        .fail-container {
            width: 35%;
            min-width: 320px;
            padding: 50px 35px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 16px;
            box-shadow:
                    0 8px 32px rgba(0, 0, 0, 0.05),
                    0 0 12px rgba(212, 175, 55, 0.1) inset; /* 内发光模拟金属边框 */
            position: relative;
            z-index: 1;
            text-align: center;
        }

        /* 容器顶部鎏金光带：白金主题核心装饰 */
        .fail-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #D4AF37, #F9F292, #D4AF37);
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        /* 失败图标：鎏金配色+淡入动画 */
        .fail-icon {
            font-size: 60px;
            margin-bottom: 30px;
            color: #D4AF37; /* 鎏金图标色 */
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
            /* 入场动画 */
            animation: fadeInScale 0.8s ease forwards;
            opacity: 0;
            transform: scale(0.9);
        }

        /* 标题样式：深灰文字+鎏金阴影 */
        .fail-container h2 {
            color: #3A362E;
            font-size: 32px;
            margin-bottom: 15px;
            letter-spacing: 1.5px;
            text-shadow: 0 1px 2px rgba(212, 175, 55, 0.1);
            /* 延迟入场动画 */
            animation: fadeIn 0.8s ease 0.3s forwards;
            opacity: 0;
        }

        /* 失败原因说明：淡灰文字+柔和质感 */
        .fail-reason {
            color: #6B665D;
            font-size: 19px;
            margin: 20px 0 35px;
            line-height: 1.5;
            letter-spacing: 0.5px;
            animation: fadeIn 0.8s ease 0.6s forwards;
            opacity: 0;
        }

        /* 操作按钮组：横向排列+白金对比 */
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
            animation: fadeUp 0.8s ease 0.9s forwards;
            opacity: 0;
            transform: translateY(15px);
        }

        /* 重试支付按钮：鎏金底色+白色文字 */
        .retry-btn,
        .home-btn {
            padding: 11px 35px;
            border-radius: 8px;
            font-size: 19px;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .retry-btn {
            background-color: #D4AF37;
            color: #FFFFFF;
            border: 1px solid #D4AF37;
        }

        /* 首页按钮：白色底色+鎏金边框 */
        .home-btn {
            background-color: #FFFFFF;
            color: #D4AF37;
            border: 1px solid #D4AF37;
        }

        /* 按钮 hover 光效：鎏金流动效果 */
        .retry-btn::after,
        .home-btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .home-btn::after {
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
        }

        .retry-btn:hover {
            background-color: #C29E2E;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
        }

        .home-btn:hover {
            background-color: rgba(212, 175, 55, 0.05);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
        }

        .retry-btn:hover::after,
        .home-btn:hover::after {
            left: 100%;
        }

        .retry-btn:active,
        .home-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(212, 175, 55, 0.1);
        }

        /* 动画定义 */
        @keyframes fadeInScale {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式适配：小屏幕优化 */
        @media (max-width: 768px) {
            .fail-container {
                width: 85%;
                padding: 40px 25px;
            }

            .fail-icon {
                font-size: 50px;
            }

            .fail-container h2 {
                font-size: 28px;
            }

            .fail-reason {
                font-size: 17px;
                margin: 18px 0 30px;
            }

            .action-buttons {
                gap: 15px;
                flex-wrap: wrap; /* 小屏幕自动换行 */
            }

            .retry-btn,
            .home-btn {
                padding: 10px 30px;
                font-size: 17px;
                width: 100%; /* 小屏幕按钮全屏宽 */
            }
        }
    </style>
</head>
<body>
<div class="fail-container">
    <!-- 失败图标 -->
    <i class="fas fa-times-circle fail-icon"></i>
    <!-- 标题 -->
    <h2>支付未完成</h2>
    <!-- 失败原因说明 -->
    <p class="fail-reason">
        支付请求超时或网络异常<br>
        请检查网络后重试，或返回首页重新操作
    </p>
    <!-- 操作按钮组：重试支付 + 返回首页 -->
    <div class="action-buttons">
        <a href="javascript:history.back()" class="retry-btn">重试支付</a>
        <a href="/book/index" class="home-btn">返回首页</a>
    </div>
</div>
</body>
</html>